
  
  

  


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <title>Slider - scriptaculous - GitHub</title>
    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub" />
    <link rel="fluid-icon" href="http://github.com/fluidicon.png" title="GitHub" />

    <link href="bundle_common.css-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets3.github.com/stylesheets/bundle_common.css?50db3600c671ce4a4c51f918f6c22e0480bab847" media="screen" rel="stylesheet" type="text/css" />
<link href="bundle_github.css-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets3.github.com/stylesheets/bundle_github.css?50db3600c671ce4a4c51f918f6c22e0480bab847" media="screen" rel="stylesheet" type="text/css" />

    <script type="text/javascript" charset="utf-8">
      var GitHub = {}
      var github_user = null
    </script>
    <script src="jquery.min.js" tppabs="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="bundle_common.js-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets1.github.com/javascripts/bundle_common.js?50db3600c671ce4a4c51f918f6c22e0480bab847" type="text/javascript"></script>
<script src="bundle_github.js-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets2.github.com/javascripts/bundle_github.js?50db3600c671ce4a4c51f918f6c22e0480bab847" type="text/javascript"></script>

        <script type="text/javascript" charset="utf-8">
      GitHub.spy({
        repo: "madrobby/scriptaculous"
      })
    </script>

    
  <link href="http://github.com/feeds/madrobby/commits/scriptaculous/master" rel="alternate" title="Recent Commits to scriptaculous:master" type="application/atom+xml" />

    <meta name="description" content="script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours." />
    <script type="text/javascript">
      GitHub.nameWithOwner = GitHub.nameWithOwner || "madrobby/scriptaculous";
      GitHub.currentRef = "master";
    </script>
  

            <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-3769691-2']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script');
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www/') + '.google-analytics.com/ga.js';
        ga.setAttribute('async', 'true');
        document.documentElement.firstChild.appendChild(ga);
      })();
    </script>

  </head>

  

  <body>
    

    

    <div class="" id="main">
      <div id="header" class="pageheaded">
        <div class="site">
          <div class="logo">
            <a href="javascript:if(confirm('http://github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/'" tppabs="http://github.com/"><img src="logov3.png" tppabs="http://wiki.github.com/images/modules/header/logov3.png" alt="github" /></a>
          </div>
          
          <div class="topsearch">
  
    <form action="http://github.com/search" id="top_search_form" method="get">
      <a href="javascript:if(confirm('http://github.com/search  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/search'" tppabs="http://github.com/search" class="advanced-search tooltipped downwards" title="Advanced Search">Advanced Search</a>
      <input type="search" class="search repo_autocompleter" name="q" results="5" placeholder="Search&hellip;" /> <input type="submit" value="Search" class="button" />
      <input type="hidden" name="type" value="Everything" />
      <input type="hidden" name="repo" value="" />
      <input type="hidden" name="langOverride" value="" />
      <input type="hidden" name="start_value" value="1" />
    </form>
  
  
    <ul class="nav logged_out">
      
        <li><a href="javascript:if(confirm('http://github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/'" tppabs="http://github.com/">Home</a></li>
        <li class="pricing"><a href="javascript:if(confirm('http://github.com/plans  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/plans'" tppabs="http://github.com/plans">Pricing and Signup</a></li>
        <li><a href="javascript:if(confirm('http://github.com/explore  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/explore'" tppabs="http://github.com/explore">Explore GitHub</a></li>
        
        <li><a href="javascript:if(confirm('http://wiki.github.com/blog  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/blog'" tppabs="http://wiki.github.com/blog">Blog</a></li>
      
      <li></li>
    </ul>
  
</div>

        </div>
      </div>

      
      
        
    <div class="site">
      <div class="pagehead repohead vis-public   emptyrepohead shortdetails">
        <h1>
          <a href="javascript:if(confirm('http://github.com/madrobby  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby'" tppabs="http://github.com/madrobby">madrobby</a> / <strong><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous'" tppabs="http://github.com/madrobby/scriptaculous">scriptaculous</a></strong>
          
          
        </h1>

        
    <ul class="actions">
      
      
      <li class="repostats">
        <ul class="repo-stats">
          <li class="watchers"><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/watchers  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/watchers'" tppabs="http://github.com/madrobby/scriptaculous/watchers" title="Watchers" class="tooltipped downwards">1,483</a></li>
          <li class="forks"><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/network  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/network'" tppabs="http://github.com/madrobby/scriptaculous/network" title="Forks" class="tooltipped downwards">409</a></li>
        </ul>
      </li>
    </ul>


        <ul class="tabs">
  <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/tree/master  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/tree/master'" tppabs="http://github.com/madrobby/scriptaculous/tree/master" class="false" highlight="repo_source">Source</a></li>
  <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/commits/master  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/commits/master'" tppabs="http://github.com/madrobby/scriptaculous/commits/master" class="false" highlight="repo_commits">Commits</a></li>

  
  <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/network  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/network'" tppabs="http://github.com/madrobby/scriptaculous/network" class="false" highlight="repo_network">Network</a></li>

  

  

  
    
    <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/downloads  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/downloads'" tppabs="http://github.com/madrobby/scriptaculous/downloads" class="false">Downloads</a></li>
  

  
    
    <li><a href="index.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/" class="false">Wiki</a></li>
  

  <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/graphs  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/graphs'" tppabs="http://github.com/madrobby/scriptaculous/graphs" class="false" highlight="repo_graphs">Graphs</a></li>

  <li class="contextswitch nochoices">
    <span class="toggle leftwards" >
      <em>Branch:</em>
      <code>master</code>
    </span>
  </li>
</ul>

<div style="display:none" id="pl-description"><p><em class="placeholder">click here to add a description</em></p></div>
<div style="display:none" id="pl-homepage"><p><em class="placeholder">click here to add a homepage</em></p></div>










        

      </div><!-- /.pagehead -->

      



<div id="repos">
  


<script type="text/javascript">
  GitHub.currentCommitRef = "master"
  GitHub.currentRepoOwner = "madrobby"
  GitHub.currentRepo = "scriptaculous"
  GitHub.downloadRepo = '/madrobby/scriptaculous/archives/master'
  

  
</script>








</div>

<div id="guides">
  <div class="guide">
    <!-- main content -->

    <div class="main">

      
        <div class="actions">
          <a href="index.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/">Home</a>
          | <a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/slider/edit  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/slider/edit'" tppabs="http://github.com/madrobby/scriptaculous/wikis/slider/edit">Edit</a> |
          <a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/new  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/new'" tppabs="http://github.com/madrobby/scriptaculous/wikis/new">New</a>
        </div>
      

      <h1>Slider</h1>

      <div class="wikistyle">
        <link rel="stylesheet" title="Sunburst" href="sunburst.css" tppabs="http://script.aculo.us/github/styles/sunburst.css"/>
<script type="text/javascript" src="prototype.js" tppabs="http://script.aculo.us/prototype.js"></script><script type="text/javascript" src="scriptaculous.js" tppabs="http://script.aculo.us/scriptaculous.js"></script><p style="background:#eee; border-bottom:1px solid #bbb; padding:4px 2px 2px 2px;"><a href="controls.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/controls">Controls</a> &gt; <strong>Slider</strong></p>
<h2>Introduction</h2>
<p>A slider control which can be used to select a single or multiple values from a given range, or even set of values.</p>
<h2>Syntax</h2>
<p>To make a slider element, you create a new instance of class Control.Slider.</p>
<pre><code class="javascript">
new Control.Slider('handles','track', [options]);
</code></pre>
<p><code>handles</code> can either be a single id (or element) or, if you want more than one handle, an array of ids (or elements). <code>track</code> is either id or element.</p>
<h2>Options</h2>
<table>
	<tr>
		<th>Option </th>
		<th>Since </th>
		<th>Default </th>
		<th>Description </th>
	</tr>
	<tr>
		<td> axis</td>
		<td>V1.5 </td>
		<td> horizontal </td>
		<td> Sets the direction that the slider will move in. It should either be horizontal or vertical. </td>
	</tr>
	<tr>
		<td> increment </td>
		<td> V1.5 </td>
		<td> 1 </td>
		<td> Defines the relationship of value to pixels. Setting this to 1 will mean each movement of 1 pixel equates to 1 value. </td>
	</tr>
	<tr>
		<td> maximum </td>
		<td> V1.5 </td>
		<td> (none) </td>
		<td> Length of track in pixels adjusted by increment. The maximum value that the slider will move to. For horizontal this is to the right while vertical it is down. </td>
	</tr>
	<tr>
		<td> minimum </td>
		<td> V1.5 </td>
		<td> 0 </td>
		<td> The minimum value that the slider can move to. For horizontal this is to the left while vertical it is up. Note: this also sets the beginning of the slider (zeroes it out). </td>
	</tr>
	<tr>
		<td> range </td>
		<td> 0 </td>
		<td> (none) </td>
		<td> Use the $R(min,max) </td>
	</tr>
	<tr>
		<td> alignX </td>
		<td> V1.5 </td>
		<td> 0 </td>
		<td> This will move the starting point on the x-axis for the handle in relation to the track. It is often used to move the ‘point’ of the handle to where 0 should be. It can also be used to set a different starting point on the track. </td>
	</tr>
	<tr>
		<td> alignY </td>
		<td> V1.5 </td>
		<td> 0 </td>
		<td> This will move the starting point on the y-axis for the handle in relation to the track. It is often used to move the ‘point’ of the handle to where 0 should be. It can also be used to set a different starting point on the track. </td>
	</tr>
	<tr>
		<td> sliderValue </td>
		<td> V1.5 </td>
		<td> 0 </td>
		<td> Will set the initial slider value. The handle will be set to this value, assuming it is within the minimum and maxium values. </td>
	</tr>
	<tr>
		<td> disabled </td>
		<td> V1.5 </td>
		<td> (none) </td>
		<td> This will lock the slider so that it will not move and thus is disabled. </td>
	</tr>
	<tr>
		<td> handleImage </td>
		<td> V1.5 </td>
		<td> (none) </td>
		<td> The id of the image that represents the handle. This is used to swap out the image src with disabled image src when the slider is enabled. </td>
	</tr>
	<tr>
		<td> handleDisabled </td>
		<td> V1.5 </td>
		<td> (none) </td>
		<td> The id of the image that represents the disabled handle. This is used to change the image src when the slider is disabled. </td>
	</tr>
	<tr>
		<td> values </td>
		<td> V1.5 </td>
		<td> (none) </td>
		<td> Accepts an array of integers. If set these will be the only legal values for the slider to be at. Thus you can set specific slider values that the user can move the slider to. </td>
	</tr>
	<tr>
		<td> spans </td>
		<td> ?? </td>
		<td> (none) </td>
		<td> An array of ids or elements which are positioned between handles. This is used only when slider has more than one handle. </td>
	</tr>
	<tr>
		<td> restricted </td>
		<td> ?? </td>
		<td> false </td>
		<td> Used only for multiple handles, when restricted is true, handle(s) with greater indexes are not allowed to have values less than handles with smaller indexes. When restricted is false, handles can be moved independently from others. </td>
	</tr>
</table>
<p>The slider control offers some functions to let javascript update its state:</p>
<table>
	<tr>
		<th>Function </th>
		<th>Parameters </th>
		<th>Description </th>
	</tr>
	<tr>
		<td> setValue </td>
		<td><code>value</code>, <code>handleIndex</code> </td>
		<td> Will update the slider’s value and thus move the slider handle to the appropriate position. <code>handleIndex</code> is optional, when it is not passed then &#8216;active&#8217; (last-dragged/used) handle is used. <strong><span class="caps">NOTE</span>:</strong> when using setValue, the onChange callback function is called. </td>
	</tr>
	<tr>
		<td> setDisabled </td>
		<td> (none) </td>
		<td> Will set the slider to the disabled state (disabled = true). </td>
	</tr>
	<tr>
		<td> setEnabled </td>
		<td> (none) </td>
		<td> Will set the slider to the enabled state (disabled = false). </td>
	</tr>
</table>
<p>Additionally, the options parameter can take the following callback function:</p>
<table>
	<tr>
		<th>Callback </th>
		<th>Description </th>
	</tr>
	<tr>
		<td> onSlide </td>
		<td> Called whenever the Slider is moved by dragging. The called function gets the slider value (or array if slider has multiple handles) as its parameter. </td>
	</tr>
	<tr>
		<td> onChange </td>
		<td> Called whenever the Slider has finished moving or has had its value changed via the setSlider Value function. The called function gets the slider value (or array if slider has multiple handles) as its parameter. </td>
	</tr>
</table>
<p>With both of the above, using multiple handles causes an array of their respective values to be passed to the callback. Both receive the Slider object as a second paramater.</p>
<h2>Examples</h2>
<h3>Single handle</h3>
<pre><code class="javascript">
// from the author's first demo of a vertical slider.  It begins disabled.
var s2 = new Control.Slider('slider_2', 'track_2', {
  axis:'vertical',
  minimum: 60,
  maximum: 288,
  alignX: -28,
  alignY: -5,
  disabled: true, 
  handleImage: 'slider_2handle',
  handleDisabled: 'images/vsliderhandle_gray.gif'
});

// example of a horizontal slider that allows only 4 possible values
var sliderLimited = new Control.Slider('slider_Limited', 'track_Limited', {
  minimum: 2,
  maximum: 30,
  increment: 9,
  alignX: -5,
  alignY: -5,
  values: [2, 10, 15, 30]
});

// Setting the callbacks later on
s2.options.onChange = function(value) {
  // ...
  $('height_value').update(value);
};

s2.options.onSlide = function(value) {
  // ...
  $('height_value').update(value);
};
</code></pre>
<h3>Multiple handles</h3>
<pre><code class="html">
&lt;div id="square_slider" class="slider"&gt;
  &lt;div id="square_slider_handle_min" class="handle left"&gt;&lt;/div&gt;
  &lt;div id="square_slider_handle_max" class="handle right"&gt;&lt;/div&gt;

  &lt;div id="square_slider_span" class="span"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<pre><code class="javascript">
var handles = ['square_slider_handle_min', 'square_slider_handle_max'];
var square_slider = new Control.Slider(handles, 'square_slider', {
    range: $R(0, 100),
    values: $R(0, 100),
    sliderValue: [20, 80],
    spans: ["square_slider_span"],
    restricted: true
});
</code></pre>
<h2>Demo</h2>

<style type="text/css">
  div.slider { width:256px; margin:10px 0; background-color:#ccc; height:10px; position: relative; }
  div.slider div.handle { width:10px; height:15px; background-color:#f00; cursor:move; position: absolute; }

  div#zoom_element { width:50px; height:50px; background:#2d86bd; position:relative; }
</style>

<div class="demo">
  <p>Use the slider to resize the box</p>
  <div id="zoom_slider" class="slider">
    <div class="handle"></div>
  </div>

  <p>And this to change its color</p>
  <div id="rgb_slider" class="slider">
    <div class="handle" style="background-color: #f00;"></div>
    <div class="handle" style="background-color: #0f0;"></div>
    <div class="handle" style="background-color: #00f;"></div>
  </div>

  <div id="zoom_element"></div>
</div>

<script type="text/javascript">
  (function() {
    var zoom_slider = $('zoom_slider'),
        rgb_slider = $('rgb_slider'),
        box = $('zoom_element');

    new Control.Slider(zoom_slider.down('.handle'), zoom_slider, {
      range: $R(40, 160),
      sliderValue: 50,
      onSlide: function(value) {
        box.setStyle({ width: value + 'px', height: value + 'px' });
      },
      onChange: function(value) { 
        box.setStyle({ width: value + 'px', height: value + 'px' });
      }
    });

    new Control.Slider(rgb_slider.select('.handle'), rgb_slider, {
      range: $R(0, 255),
      sliderValue: [45, 134, 189],
      onSlide: function(values) {
        box.setStyle({ backgroundColor: "rgb("+ values.map(Math.round).join(',') +")" });
      },
      onChange: function(values) { 
        box.setStyle({ backgroundColor: "rgb("+ values.map(Math.round).join(',') +")" });
      }
    });
  })();
</script>
<h3>Source Code of the Demo</h3>
<pre><code class="html">

&lt;style type="text/css"&gt;
  div.slider { width:256px; margin:10px 0; background-color:#ccc; height:10px; position: relative; }
  div.slider div.handle { width:10px; height:15px; background-color:#f00; cursor:move; position: absolute; }

  div#zoom_element { width:50px; height:50px; background:#2d86bd; position:relative; }
&lt;/style&gt;

&lt;div class="demo"&gt;
  &lt;p&gt;Use the slider to resize the box&lt;/p&gt;
  &lt;div id="zoom_slider" class="slider"&gt;
    &lt;div class="handle"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;p&gt;And this to change its color&lt;/p&gt;
  &lt;div id="rgb_slider" class="slider"&gt;
    &lt;div class="handle" style="background-color: #f00;"&gt;&lt;/div&gt;
    &lt;div class="handle" style="background-color: #0f0;"&gt;&lt;/div&gt;
    &lt;div class="handle" style="background-color: #00f;"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div id="zoom_element"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
  (function() {
    var zoom_slider = $('zoom_slider'),
        rgb_slider = $('rgb_slider'),
        box = $('zoom_element');

    new Control.Slider(zoom_slider.down('.handle'), zoom_slider, {
      range: $R(40, 160),
      sliderValue: 50,
      onSlide: function(value) {
        box.setStyle({ width: value + 'px', height: value + 'px' });
      },
      onChange: function(value) { 
        box.setStyle({ width: value + 'px', height: value + 'px' });
      }
    });

    new Control.Slider(rgb_slider.select('.handle'), rgb_slider, {
      range: $R(0, 255),
      sliderValue: [45, 134, 189],
      onSlide: function(values) {
        box.setStyle({ backgroundColor: "rgb("+ values.map(Math.round).join(',') +")" });
      },
      onChange: function(values) { 
        box.setStyle({ backgroundColor: "rgb("+ values.map(Math.round).join(',') +")" });
      }
    });
  })();
&lt;/script&gt;
</code></pre>
<script type="text/javascript" src="highlight.js" tppabs="http://script.aculo.us/github/highlight.js"></script><script type="text/javascript">
  hljs.initHighlightingOnLoad.apply(null, hljs.ALL_LANGUAGES);
</script>
      </div>
    </div>

    <!-- sidebar -->

    <div class="sidebar">
      <h3>
        Pages
        <a href="javascript:if(confirm('http://wiki.github.com/madrobby/scriptaculous//wikis.atom  \n\nThis file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/madrobby/scriptaculous//wikis.atom'" tppabs="http://wiki.github.com/madrobby/scriptaculous//wikis.atom"><img alt="feed" src="feed.png-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets0.github.com/images/icons/feed.png?50db3600c671ce4a4c51f918f6c22e0480bab847" title="Feed of recent scriptaculous wiki edits" /></a>
      </h3>
      


<ul>
  
    <li><b><a href="in-place-editor.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/in-place-editor"> In Place Editor</a></b></li>
  
    <li><b><a href="ajax-autocompleter.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter">Ajax.Autocompleter</a></b></li>
  
    <li><b><a href="ajax-inplacecollectioneditor.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ajax-inplacecollectioneditor">Ajax.InPlaceCollectionEditor</a></b></li>
  
    <li><b><a href="ajax-inplaceeditor.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor">Ajax.InPlaceEditor</a></b></li>
  
    <li><b><a href="autocompleterbase.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/autocompleterbase">Autocompleter.Base</a></b></li>
  
    <li><b><a href="autocompleter-local.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/autocompleter-local">Autocompleter.Local</a></b></li>
  
    <li><b><a href="behaviours.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/behaviours">Behaviours</a></b></li>
  
    <li><b><a href="builder.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/builder">Builder</a></b></li>
  
    <li><b><a href="combination-effects.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/combination-effects">Combination Effects</a></b></li>
  
    <li><b><a href="combination-effects-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/combination-effects-demo">Combination Effects Demo</a></b></li>
  
    <li><b><a href="contribute.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/contribute">Contribute</a></b></li>
  
    <li><b><a href="controls.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/controls">Controls</a></b></li>
  
    <li><b><a href="core-effects.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/core-effects">Core Effects</a></b></li>
  
    <li><b><a href="demos.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/demos">Demos</a></b></li>
  
    <li><b><a href="draggable.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/draggable">Draggable</a></b></li>
  
    <li><b><a href="draggables-object.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/draggables-object">Draggables Object</a></b></li>
  
    <li><b><a href="droppables.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/droppables">Droppables</a></b></li>
  
    <li><b><a href="effect-queues.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-queues">Effect Queues</a></b></li>
  
    <li><b><a href="effect-appear.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-appear">Effect.Appear</a></b></li>
  
    <li><b><a href="effect-blinddown.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-blinddown">Effect.BlindDown</a></b></li>
  
    <li><b><a href="effect-blindup.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-blindup">Effect.BlindUp</a></b></li>
  
    <li><b><a href="effect-dropout.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-dropout">Effect.DropOut</a></b></li>
  
    <li><b><a href="effect-fade.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-fade">Effect.Fade</a></b></li>
  
    <li><b><a href="effect-fold.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-fold">Effect.Fold</a></b></li>
  
    <li><b><a href="effect-grow.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-grow">Effect.Grow</a></b></li>
  
    <li><b><a href="effect-highlight.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-highlight">Effect.Highlight</a></b></li>
  
    <li><b><a href="effect-methods.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-methods">Effect.Methods</a></b></li>
  
    <li><b><a href="effect-morph.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-morph">Effect.Morph</a></b></li>
  
    <li><b><a href="effect-move.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-move">Effect.Move</a></b></li>
  
    <li><b><a href="effect-multiple.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-multiple">Effect.multiple</a></b></li>
  
    <li><b><a href="effect-opacity.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-opacity">Effect.Opacity</a></b></li>
  
    <li><b><a href="effect-parallel.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-parallel">Effect.Parallel</a></b></li>
  
    <li><b><a href="effect-puff.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-puff">Effect.Puff</a></b></li>
  
    <li><b><a href="effect-pulsate.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-pulsate">Effect.Pulsate</a></b></li>
  
    <li><b><a href="effect-scale.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-scale">Effect.Scale</a></b></li>
  
    <li><b><a href="effectscrollto.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effectscrollto">Effect.ScrollTo</a></b></li>
  
    <li><b><a href="effect-shake.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-shake">Effect.Shake</a></b></li>
  
    <li><b><a href="effect-shrink.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-shrink">Effect.Shrink</a></b></li>
  
    <li><b><a href="effect-slidedown.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-slidedown">Effect.SlideDown</a></b></li>
  
    <li><b><a href="effect-slideup.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-slideup">Effect.SlideUp</a></b></li>
  
    <li><b><a href="effect-squish.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-squish">Effect.Squish</a></b></li>
  
    <li><b><a href="effect-switchoff.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-switchoff">Effect.SwitchOff</a></b></li>
  
    <li><b><a href="effect-tagifytext.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-tagifytext">Effect.tagifyText</a></b></li>
  
    <li><b><a href="effect-toggle.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-toggle">Effect.toggle</a></b></li>
  
    <li><b><a href="effect-transitions.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-transitions">Effect.Transitions</a></b></li>
  
    <li><b><a href="effecttween.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effecttween">Effect.Tween</a></b></li>
  
    <li><b><a href="effects.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effects">Effects</a></b></li>
  
    <li><b><a href="faq.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/faq">FAQ</a></b></li>
  
    <li><b><a href="formelementdelayedobserver.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/formelementdelayedobserver">Form.Element.DelayedObserver</a></b></li>
  
    <li><b><a href="ghostly.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ghostly">Ghostly</a></b></li>
  
    <li><b><a href="ghostly-sortable-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ghostly-sortable-demo">Ghostly Sortable Demo</a></b></li>
  
    <li><b><a href="giving-elements-layout.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/giving-elements-layout">Giving Elements Layout</a></b></li>
  
    <li><b><a href="javascript:if(confirm('http://wiki.github.com/madrobby/scriptaculous  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/madrobby/scriptaculous'" tppabs="http://wiki.github.com/madrobby/scriptaculous">Home</a></b></li>
  
    <li><b><a href="license.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/license">License</a></b></li>
  
    <li><b><a href="list-morph-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/list-morph-demo">List Morph Demo</a></b></li>
  
    <li><b><a href="porting.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/porting">porting</a></b></li>
  
    <li><b><a href="puzzle-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/puzzle-demo">Puzzle Demo</a></b></li>
  
    <li><b><a href="ruby-on-rails.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ruby-on-rails">Ruby on Rails</a></b></li>
  
    <li><b><a href="slider.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/slider">Slider</a></b></li>
  
    <li><b><a href="sortable.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable">Sortable</a></b></li>
  
    <li><b><a href="sortable-lists-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable-lists-demo">Sortable Lists Demo</a></b></li>
  
    <li><b><a href="sortable-create.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable-create">Sortable.create</a></b></li>
  
    <li><b><a href="sortable-sequence.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable-sequence">Sortable.sequence</a></b></li>
  
    <li><b><a href="sortable-serialize.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable-serialize">Sortable.serialize</a></b></li>
  
    <li><b><a href="sortables.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortables">Sortables</a></b></li>
  
    <li><b><a href="sortables-create.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortables-create">Sortables.create</a></b></li>
  
    <li><b><a href="sound.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sound">Sound</a></b></li>
  
    <li><b><a href="style-guide.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/style-guide">Style Guide</a></b></li>
  
    <li><b><a href="tabs.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/tabs">Tabs</a></b></li>
  
    <li><b><a href="testunit.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/testunit">Test.Unit</a></b></li>
  
    <li><b><a href="testunitassertions.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/testunitassertions">Test.Unit.Assertions</a></b></li>
  
    <li><b><a href="testunitlogger.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/testunitlogger">Test.Unit.Logger</a></b></li>
  
    <li><b><a href="test-unit-runner.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/test-unit-runner">Test.Unit.Runner</a></b></li>
  
    <li><b><a href="testunittestcase.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/testunittestcase">Test.Unit.Testcase</a></b></li>
  
    <li><b><a href="unit-testing.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/unit-testing">Unit Testing</a></b></li>
  
</ul>

      
    </div>

  </div>

  <!-- admin -->

  
    <div class="admin">
      <div style="float:left;">
        <small>Last edited by <b>tokyotech</b>, <abbr class="relatize" title="2009-08-24 16:42:43">Mon Aug 24 16:42:43 -0700 2009</abbr></small>

        <div class="actions">
          <a href="index.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/">Home</a>
          | <a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/slider/edit  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/slider/edit'" tppabs="http://github.com/madrobby/scriptaculous/wikis/slider/edit">Edit</a> |
          <a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/new  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/new'" tppabs="http://github.com/madrobby/scriptaculous/wikis/new">New</a>
        </div>
      </div>

      <div style="float:right;">
        <small>Versions:</small>
        <select id="versions_select" name="versions_select"><option value="http://github.com/madrobby/scriptaculous/wikis/slider">Current</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/32">Version 32 by tokyotech</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/31">Version 31 by bkerley</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/30">Version 30 by Diodeus</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/29">Version 29 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/28">Version 28 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/27">Version 27 by joe-loco</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/26">Version 26 by joe-loco</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/25">Version 25 by joe-loco</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/24">Version 24 by joe-loco</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/23">Version 23 by joe-loco</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/22">Version 22 by joe-loco</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/21">Version 21 by joe-loco</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/20">Version 20 by joe-loco</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/19">Version 19 by joe-loco</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/18">Version 18 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/17">Version 17 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/16">Version 16 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/15">Version 15 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/14">Version 14 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/13">Version 13 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/12">Version 12 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/11">Version 11 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/10">Version 10 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/9">Version 9 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/8">Version 8 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/7">Version 7 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/6">Version 6 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/5">Version 5 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/4">Version 4 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/3">Version 3 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/2">Version 2 by stiff</option><option value="http://wiki.github.com/madrobby/scriptaculous/slider/1">Version 1 by stiff</option></select>
      </div>
    </div>
  
</div>



    </div>
  
      

      <div class="push"></div>
    </div>

    <div id="footer">
      <div class="site">
        <div class="info">
          <div class="links">
            <a href="javascript:if(confirm('http://github.com/blog  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/blog'" tppabs="http://github.com/blog"><b>Blog</b></a> |
            <a href="javascript:if(confirm('http://support.github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://support.github.com/'" tppabs="http://support.github.com/">Support</a> |
            <a href="javascript:if(confirm('http://github.com/training  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/training'" tppabs="http://github.com/training">Training</a> |
            <a href="javascript:if(confirm('http://github.com/contact  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/contact'" tppabs="http://github.com/contact">Contact</a> |
            <a href="javascript:if(confirm('http://develop.github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://develop.github.com/'" tppabs="http://develop.github.com/">API</a> |
            <a href="javascript:if(confirm('http://status.github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://status.github.com/'" tppabs="http://status.github.com/">Status</a> |
            <a href="javascript:if(confirm('http://twitter.com/github  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://twitter.com/github'" tppabs="http://twitter.com/github">Twitter</a> |
            <a href="javascript:if(confirm('http://help.github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://help.github.com/'" tppabs="http://help.github.com/">Help</a> |
            <a href="javascript:if(confirm('http://github.com/security  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/security'" tppabs="http://github.com/security">Security</a>
          </div>
          <div class="company">
            &copy;
            2010
            <span id="_rrt" title="0.16964s from fe1.rs.github.com">GitHub</span> Inc.
            All rights reserved. |
            <a href="javascript:if(confirm('http://wiki.github.com/site/terms  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/site/terms'" tppabs="http://wiki.github.com/site/terms">Terms of Service</a> |
            <a href="javascript:if(confirm('http://wiki.github.com/site/privacy  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/site/privacy'" tppabs="http://wiki.github.com/site/privacy">Privacy Policy</a>
          </div>
        </div>
        <div class="sponsor">
          <div>
            Powered by the <a href="javascript:if(confirm('http://www.rackspace.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://www.rackspace.com/'" tppabs="http://www.rackspace.com/">Dedicated
            Servers</a> and<br/> <a href="javascript:if(confirm('http://www.rackspacecloud.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://www.rackspacecloud.com/'" tppabs="http://www.rackspacecloud.com/">Cloud
            Computing</a> of Rackspace Hosting<span>&reg;</span>
          </div>
          <a href="javascript:if(confirm('http://www.rackspace.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://www.rackspace.com/'" tppabs="http://www.rackspace.com/">
            <img alt="Dedicated Server" src="rackspace_logo.png-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets2.github.com/images/modules/footer/rackspace_logo.png?50db3600c671ce4a4c51f918f6c22e0480bab847" />
          </a>
        </div>
      </div>
    </div>

    
    
    
  </body>
</html>

